<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html"; charset="UTF-8">

    <style>
        .head{font-size:x-large;
            font-style: italic;}
    </style>
    </head>
    <body onload="list()">
        <h class="head">待办事项清单</h>
        <p><input type="text" placeholder="添加新事项" id="new">
            <input type="button" value="+" onclick="add()">
        </p>
            <p><input type='text' size='20px' placeholder="删除事项" id='del'/>
            <input type='button' value="-" onclick="deleted()"/></p>
            <p><input type='button' value="已完成事项" onclick="yescompleted()"/>
            <input type='button' value="未完成事项" onclick="nofinish()"/>
            <input type='button' value="所有事项" onclick="all_list()"/></p>
        <ul id="td">
        </ul>
    </body>

    <script>
    function list(){
        fetch("/todos")
            .then(function(response){
                return response.json();
            })
            .then(function(data){
                document.getElementById("td").innerHTML="";
                var todos=data.todos
                for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("td").innerHTML+=s;
                }
            });}
    function add(){
        var title=document.getElementById("new").value;
        var url='/create';
        var headers={"Content-Type":"application/x-www-form-urlencoded"}
        fetch(url,{
            method:'POST',
            body:'title='+title,
            headers:headers})
            .then(res=>res.json())
            list();
        }

function deleted(){
        var id=parseInt(document.getElementById("del").value);
        var url='/delete';
        var headers={"Content-Type":"application/x-www-form-urlencoded"}
        fetch(url,{
            method:'POST',
            body:'id='+id,
            headers:headers})
            .then(function(response){
            return response.json();
        })
        .then(function(data){
            data=console.log();
            list();
                location.reload()
        })
        }

    function Finish(id){
    fetch('/completed'+'?id='+id)
    .then(function(response){
            return response.json();
        })
        }

    function yescompleted(){
   fetch('/things'+'?completed=1')
   .then(function(response){
       return response.json();
   })
   .then(function(data){
                document.getElementById("td").innerHTML="";
                var todos=data.todos
                for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("td").innerHTML+=s;
                }
   })}

   function nofinish(){
   fetch('/things')
   .then(function(response){
       return response.json();
   })
  .then(function(data){
                document.getElementById("td").innerHTML="";
                var todos=data.todos
                for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("td").innerHTML+=s;
                }
    })}

    function all_list(){
   fetch('/things'+'?completed=all')
       .then(function(response){
          return response.json();
       })
  .then(function(data){
                document.getElementById("td").innerHTML="";
                var todos=data.todos
                for(var i=0;i<todos.length;i++){
                var s='<li><input type="checkbox" name="'+todos[i].id+'"onchange="Finish(this.name)">'+todos[i].id+''+todos[i].title+'</li>'
                document.getElementById("td").innerHTML+=s;
                }
   })}
    </script>
</html>